<template>
    <div class="ls-goods">
        <div class="ls-goods__top ls-card">
            <el-alert
                title="温馨提示：1.新增商品时可选统一规格或者多规格，满足商品不同销售属性场景；2.商品销售状态分为销售中且库存足够时才可下单购买。"
                type="info"
                show-icon
                :closable="false"
            >
            </el-alert>
            <div class="goods-search m-t-16">
                <el-form class="ls-form" ref="form" inline :model="queryObj" label-width="80px" size="small">
                    <el-form-item label="商品搜索">
                        <el-input v-model="queryObj.keyword" placeholder="请输入商品名称/编码"></el-input>
                    </el-form-item>
                    <el-form-item label="条形码">
                        <el-input v-model="queryObj.bar_code" placeholder="请输入商品条形码"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-cascader
                            v-model="queryObj.category_id"
                            :options="categoryList"
                            :props="{
                                multiple: false,
                                checkStrictly: true,
                                label: 'name',
                                value: 'id',
                                children: 'sons',
                                emitPath: false
                            }"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="商品分销">
                        <el-select v-model="queryObj.goods_t" placeholder="请选择商品分销">
                            <el-option label="全部" value=""></el-option>
                            <el-option
                                v-for="(item, key) in goodsTypeList"
                                :key="key"
                                :label="item"
                                :value="key"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品类型">
                        <el-select v-model="queryObj.goods_type" placeholder="请选择商品类型">
                            <el-option label="全部" value=""></el-option>
                            <el-option
                                v-for="(item, key) in typeList"
                                :key="key"
                                :label="item"
                                :value="key"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="供应商">
                        <el-select v-model="queryObj.supplier_id" placeholder="请选择供应商">
                            <el-option label="全部" value=""></el-option>
                            <el-option
                                v-for="item in supplierList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="参与活动">
                        <el-select v-model="queryObj.activity_type" placeholder="请选择活动类型">
                            <el-option label="全部" value=""></el-option>
                            <el-option
                                v-for="(item, key) in activityList"
                                :key="key"
                                :label="item"
                                :value="key"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="" class="m-l-6">
                        <el-button size="small" type="primary" @click="getList(1)">查询</el-button>
                        <el-button size="small" @click="handleReset">重置</el-button>
                        <export-data
                            class="m-l-10"
                            :pageSize="pager.size"
                            :method="apiGoodsLists"
                            :param="queryObj"
                            :status="{ type: activeStatus }"
                        ></export-data>

                        <el-button style="margin-left: 10px" size="small" @click="synchronous"
                            >同步供应链商品</el-button
                        >
                        <el-dialog
                            title="供应链商品同步"
                            width="50%"
                            :visible.sync="dialogVisible"
                            :before-close="cancellation"
                        >
                            <!-- <el-button type="primary" @click="tongbu" v-if="onsholl == false">同步</el-button> -->
                           
                                <el-table :data="tableData" style="width: 100%" height="450">
                                    <el-table-column prop="title" label="产品" width="700"> </el-table-column>
                                </el-table>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="zhangting">暂停</el-button>
                                    <el-button type="primary" @click="tongbu">同步</el-button>
                                </span>
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="ls-goods__content ls-card m-t-16">
            <el-tabs v-model="activeName" v-loading="pager.loading" @tab-click="getList(1)">
                <el-tab-pane :label="`全部(${tabCount.all_count})`" name="all">
                    <goods-pane
                        v-model="pager.lists"
                        :pager="pager"
                        :categoryList="categoryList"
                        @refresh="getList()"
                    />
                </el-tab-pane>
                <el-tab-pane lazy :label="`销售中(${tabCount.sales_count})`" name="sale">
                    <goods-pane
                        v-model="pager.lists"
                        :pager="pager"
                        :categoryList="categoryList"
                        @refresh="getList()"
                    />
                </el-tab-pane>
                <el-tab-pane lazy :label="`库存预警(${tabCount.warning_count})`" name="inventory">
                    <goods-pane
                        v-model="pager.lists"
                        :pager="pager"
                        :categoryList="categoryList"
                        @refresh="getList()"
                    />
                </el-tab-pane>
                <el-tab-pane lazy :label="`已售罄(${tabCount.sellout_count})`" name="soldout">
                    <goods-pane
                        v-model="pager.lists"
                        :pager="pager"
                        :categoryList="categoryList"
                        @refresh="getList()"
                    />
                </el-tab-pane>
                <el-tab-pane lazy :label="`仓库中(${tabCount.storage_count})`" name="warehouse">
                    <goods-pane
                        v-model="pager.lists"
                        :pager="pager"
                        :categoryList="categoryList"
                        @refresh="getList()"
                    />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import GoodsPane from '@/components/goods/goods-pane.vue'
import ExportData from '@/components/export-data/index.vue'
import { RequestPaging } from '@/utils/util'
import { apiGoodsLists, apiGoodsOtherList, apiSynProduct ,apiPostgetInitPage} from '@/api/goods'
import { GoodsType } from '@/utils/type'
@Component({
    components: {
        GoodsPane,
        ExportData
    }
})
export default class Goods extends Vue {
    queryObj = {
        keyword: '',
        category_id: '',
        supplier_id: '',
        goods_type: '',
        activity_type: '',
        bar_code: '',
        goods_t: ''
    }

    // 需要循环的数组
    tableData: any = []
    dialogVisible: any = false
    totalPage: any = null
    arrOnshow: any = []
    lop:any = 0
    cancellation() {
        this.dialogVisible = false
        this.callMethodNTimes(0, false)
        this.clear()
        this.tableData = []
    }
    zhangting(){
        this.callMethodNTimes(0, false)
        this.clear()
    }
    // 清除全部定时器
    clear() {
        this.arrOnshow.forEach((item :any, index:any) => {
            clearTimeout(this.arrOnshow[index])
        })
        // 定时器数组置空
        this.arrOnshow.length = 0
    }
    // 接口请求的数据
    getLists(e: any) {
        apiSynProduct({
            page: e
        }).then(res => {
            this.tableData.push(res)
            this.totalPage = res.total
        })
    }

    callMethodNTimes(total: any, on: any) {
        let vm = this
        if (on == false) {
            total = 0
            return
        } else {
            var a=0;
            for (let i = this.lop - 1; i <= total; i++) {
                a++;
                this.arrOnshow[i] = setTimeout( () =>{
                    // debugger
                    vm.getLists(i + 1)
                    console.log(1111, on)
                }, a * 2000)
            }
        }
    }

    // 点击弹窗显示的弹窗
    synchronous() {
        this.dialogVisible = true
    }

    tongbu() {
        apiPostgetInitPage().then(res=>{
            this.lop = res.page 
            this.callMethodNTimes(res.total_page * 1,true)
            console.log(res,this.lop);
            
        })
    }

    supplierList: any[] = []
    categoryList: any[] = []
    goodsTypeList: any = []
    typeList: any = []
    activityList: any = []
    tabCount = {
        all_count: 0,
        sales_count: 0,
        sellout_count: 0,
        storage_count: 0,
        warning_count: 0
    }
    pager = new RequestPaging()
    activeName: any = 'all'
    activeStatus: any = ''
    apiGoodsLists = apiGoodsLists
    getList(page?: number): void {
        this.activeStatus = GoodsType[this.activeName]
        page && (this.pager.page = page)
        this.pager
            .request({
                callback: apiGoodsLists,
                params: {
                    type: GoodsType[this.activeName],
                    ...this.queryObj
                }
            })
            .then((res: any) => {
                this.tabCount = res?.extend
            })
    }
    handleReset() {
        this.queryObj = {
            keyword: '',
            category_id: '',
            supplier_id: '',
            goods_type: '',
            activity_type: '',
            bar_code: '',
            goods_t: ''
        }
        this.getList()
    }

    getGoodsOtherList() {
        apiGoodsOtherList({
            type: 'list'
        }).then((res: any) => {
            this.categoryList = res?.category_list
            this.supplierList = res?.supplier_list
            this.typeList = res?.type_list
            this.goodsTypeList = res?.goods_type_list
            this.activityList = res?.activity_list
        })
    }
    created() {
        this.getGoodsOtherList()
        this.getList()
    }
    activated() {
        this.getGoodsOtherList()
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.ls-goods {
    &__top {
        padding-bottom: 0px;
    }
    .goods-search {
        .ls-input-price {
            width: 180px;
        }
    }
    .ls-goods__content {
        padding-top: 0;
    }
}
</style>
